<template>
    <!-- 公众号搜索 -->
    <div>
        <el-form ref="searchFormRef" :model="searchInfo" label-width="80px" class="demo-ruleForm">
            <el-row>
                <el-col :span="10">
                    <el-form-item label="标题搜索" prop="title">
                        <el-input
                            v-model.trim="searchInfo.title"
                            placeholder="请输入标题或草稿标题进行查找"
                            clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="10">
                    <el-form-item label="公众号" prop="id">
                        <el-select
                            v-model="searchInfo.id"
                            placeholder="请选择公众号"
                            clearable
                            @visible-change="onVisibleSelect">
                            <el-option
                                v-for="item in optionsList"
                                :key="item.id"
                                :label="item.nick_name"
                                :value="item.id" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <div style="display: flex; justify-content: flex-end">
                        <el-button type="primary" @click="search">查询</el-button>
                        <el-button @click="reset">重置</el-button>
                    </div>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>
<script setup lang="ts">
import { ref, reactive, computed } from 'vue';
import { officialApi } from '../../api/material';

interface SearchInfo {
    title?: string;
    id?: any;
}

interface Props {
    /** 搜索内容 */
    modelValue?: SearchInfo;
}

const props = withDefaults(defineProps<Props>(), {
    modelValue: () => {
        return { title: '', id: '' };
    }
});

const emit = defineEmits(['update:modelValue', 'submit']);

const searchInfo: any = computed({
    get() {
        return props.modelValue;
    },
    set(val) {
        emit('update:modelValue', val);
    }
});

const searchFormRef = ref();

const optionsList = reactive<any>([]);

const onVisibleSelect = async (val: boolean) => {
    if (val) {
        const params = {
            page: 1,
            page_size: 100,
            verify_type_info: 0
        };
        const res = await officialApi(params);
        const list = res.data || [];
        optionsList.splice(0);
        optionsList.push(...list);
    }
};

const search = () => {
    emit('submit');
};

const reset = () => {
    searchInfo.value.title = '';
    searchInfo.value.id = '';
    emit('submit');
};
</script>
